<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- jQuery文件。务必在bootstrap.min.js之前引入 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <link rel="stylesheet" href="__SITE__/static/Index/css/home.css" />

</head>
<body>
<section class="sectionContent1">
    <div class="mytitle">
        <div>
            <font>{$list['proname']}</font><br /><br />
            表演者:<font>{$list['performer']}</font><font>&#12288</font>乐器:<font>{$list['musical']}</font>
        </div>
    </div>
    <div style="position: absolute;top: 4%;margin-left: 20px;color: blueviolet;">
        <b>正在表演 :</b>
    </div>
</section>
<section class="sectionContent">
    <div style="font-size: x-large;margin-left: 5%;padding: 5px;">评分</div>

    <div class="div-classify">
        <div class="div-classify-name">
            乐感理解
        </div>
        <div class="div-grade">
            <div>
                <input  class="input-grade" type="text" placeholder="请输入对该项目的评分" id="music"/>

            </div>
            <div style="margin-top: 8px;">
                <font class="font-caution">注:该项分最多不可超过200分</font>
            </div>


        </div>
    </div>

    <div class="div-classify">
        <div class="div-classify-name">
            技巧掌握
        </div>
        <div class="div-grade">
            <div>
                <input  class="input-grade" type="text" placeholder="请输入对该项目的评分" id="skill" />

            </div>
            <div style="margin-top: 8px;">
                <font class="font-caution">注:该项分最多不可超过200分</font>
            </div>


        </div>
    </div>

    <div class="div-classify">
        <div class="div-classify-name">
            曲目流畅
        </div>
        <div class="div-grade">
            <div>
                <input  class="input-grade" type="text" placeholder="请输入对该项目的评分" id="fluency" />

            </div>
            <div style="margin-top: 8px;">
                <font class="font-caution">注:该项分最多不可超过200分</font>
            </div>


        </div>
    </div>
    <div class="div-classify">
        <div class="div-classify-name">
            音色控制
        </div>
        <div class="div-grade">
            <div>
                <input  class="input-grade" type="text" placeholder="请输入对该项目的评分" id="voice" />

            </div>
            <div style="margin-top: 8px;">
                <font class="font-caution">注:该项分最多不可超过200分</font>
            </div>


        </div>
    </div>

    <div class="div-classify">
        <div class="div-classify-name">
            音乐素养
        </div>
        <div class="div-grade">
            <div>
                <input  class="input-grade" type="text" placeholder="请输入对该项目的评分" id="attach" />

            </div>
            <div style="margin-top: 8px;">
                <font class="font-caution">注:该项分最多不可超过200分</font>
            </div>


        </div>
    </div>

    <div class="button-div">
        <button class="button-submit" id="true">提交</button>
    </div>
</section>
<div class="pop-bg flex v-center">
    <div class="pop">
        <br />
        <div id="tips" style="color: black;font-size: x-large;">您的评分已提交!</div>
        <br /><br />
        <button class="button-ok">确认</button>
    </div>
</div>
<div class="pop-bg1 flex1 v-center1">
    <div class="pop1">
        <br />
        <div style="color: black;font-size: x-large;">您已评论!</div>
        <br /><br />
        <button class="button-ok1">确认</button>
    </div>
</div>

<div class="pop-bg2 flex2 v-center2">
    <div class="pop2">
        <br />
        <div style="color: black;font-size: x-large;">评论失败!</div>
        <br /><br />
        <button class="button-ok2">确认</button>
    </div>
</div>

<input type="hidden" id="now" value="{$list['id']}">
</body>
<script>
    $(function () {

        var ws = new WebSocket("ws://{$puship}");
        ws.onmessage = function (e)  {
            var data = eval("("+e.data+")");
            var type = data.type || '';
            switch(type) {
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;

                case 'msg' :
                    window.location.reload();
                    break;

                case 'init':
                    $.post("__SITE__/admin/Program/bind",{client_id:data.client_id},function (data) {
                    },'json');
            }
        };

        //提交评分
        $("#true").click(function () {
            if(checkmusic() && checkskill() && checkfluency() && checkvoice() && checkattach()) {
                var music = $("#music").val();
                var skill = $("#skill").val();
                var fluency = $("#fluency").val();
                var voice = $("#voice").val();
                var attach = $("#attach").val();
                var id = $("#now").val();
                 $("#true").attr('disabled',true);
                $.ajax({
                    url:"__SITE__/index/Makescore/addScore",
//                    url:"http://192.168.0.113/makepoint/public/index/Index/addScore",
                    data:{
                        music:music,
                        skill:skill,
                        fluency:fluency,
                        voice:voice,
                        attach:attach,
                        id:id,
                        openid:"{:session('pfopenid')}"
                    },
                    type:'POST',
                    dataType:'json',
                    success:function (data) {
                        if(data.status == 1) {
							$("#tips").text("您的评分已提交!");
                            $(".pop-bg").css('visibility','visible');
                        }
                        if(data.status == 2) {
                            $(".pop-bg1").css('visibility','visible');
                        }
                        if(data.status == 0) {
                            $(".pop-bg2").css('visibility','visible');
                        }
						if(data.status == 3) {
							$("#tips").text("项目已结束!");
                            $(".pop-bg").css('visibility','visible');
                        }
                    }
                });
            }
        });

        $(".button-ok").click(function () {
            $(".pop-bg").css('visibility','hidden');
            window.location.reload();
        });


        $(".button-ok1").click(function () {
            $(".pop-bg1").css('visibility','hidden');
            window.location.reload();
        });


        $(".button-ok2").click(function () {
            $(".pop-bg2").css('visibility','hidden');
            window.location.reload();
        });

        //检测乐感理解
        function checkmusic()
        {
            var item = $("#music").val();
            if(!item) {
                $("#music").css("border","1px solid red");
                return false;
            }
            var tag = /^[0-9]*$/;
            if(!tag.test($("#music").val())) {
                $("#music").css("border","1px solid red");
                return false;
            }
            var v = $("#music").val();
            if(v > 200) {
                $("#music").css("border","1px solid red");
                return false;
            }
            $("#music").css('border','1px solid #A9A9A9');
            return true;
        }
        $("#music").blur(function () {
            checkmusic();
        });

        //检测技巧掌握
        function checkskill()
        {
            var item = $("#skill").val();
            if(!item) {
                $("#skill").css("border","1px solid red");
                return false;
            }
            var tag = /^[0-9]*$/;
            if(!tag.test($("#skill").val())) {
                $("#skill").css("border","1px solid red");
                return false;
            }
            var v = $("#skill").val();
            if(v > 200) {
                $("#skill").css("border","1px solid red");
                return false;
            }
            $("#skill").css('border','1px solid #A9A9A9');
            return true;
        }
        $("#skill").blur(function () {
            checkskill();
        });

        //检测曲目流畅
        function checkfluency()
        {
            var item = $("#fluency").val();
            if(!item) {
                $("#fluency").css("border","1px solid red");
                return false;
            }
            var tag = /^[0-9]*$/;
            if(!tag.test($("#fluency").val())) {
                $("#fluency").css("border","1px solid red");
                return false;
            }
            var v = $("#fluency").val();
            if(v > 200) {
                $("#fluency").css("border","1px solid red");
                return false;
            }
            $("#fluency").css('border','1px solid #A9A9A9');
            return true;
        }
        $("#fluency").blur(function () {
            checkfluency();
        });

        //检测音色控制
        function checkvoice()
        {
            var item = $("#voice").val();
            if(!item) {
                $("#voice").css("border","1px solid red");
                return false;
            }
            var tag = /^[0-9]*$/;
            if(!tag.test($("#voice").val())) {
                $("#voice").css("border","1px solid red");
                return false;
            }
            var v = $("#voice").val();
            if(v > 200) {
                $("#voice").css("border","1px solid red");
                return false;
            }
            $("#voice").css('border','1px solid #A9A9A9');
            return true;
        }
        $("#voice").blur(function () {
            checkvoice();
        });

        //检测音乐素养
        function checkattach()
        {
            var item = $("#attach").val();
            if(!item) {
                $("#attach").css("border","1px solid red");
                return false;
            }
            var tag = /^[0-9]*$/;
            if(!tag.test($("#attach").val())) {
                $("#attach").css("border","1px solid red");
                return false;
            }
            var v = $("#attach").val();
            if(v > 200) {
                $("#attach").css("border","1px solid red");
                return false;
            }
            $("#attach").css('border','1px solid #A9A9A9');
            return true;
        }
        $("#attach").blur(function () {
            checkattach();
        });
    })
</script>
</html>
